.bh-row {
    display: flex;
    flex-flow: row wrap;
}
.bh-col {
    position: relative;
    max-width: 100%;
    min-height: 1px;
}

/*宽度占比*/
.bh-col-24 {
    display: block;
    flex: 0 0 100%;
    max-width: 100%;
}
.bh-col-12 {
    display: block;
    flex: 0 0 50%;
    max-width: 50%;
}
.bh-col-8 {
    display: block;
    flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
}
.bh-col-6 {
    display: block;
    flex: 0 0 25%;
    max-width: 25%;
}
.bh-col-4 {
    display: block;
    flex: 0 0 16.66666667%;
    max-width: 16.66666667%;
}

/*竖直对齐方式*/
.bh-row-top {
    align-items: flex-start;
}
.bh-row-middle {
    align-items: center;
}
.bh-row-bottom {
    align-items: flex-end;
}

/*竖直对齐方式*/
.bh-row-start {
    justify-content: flex-start;
}
.bh-row-center {
    justify-content: center;
}
.bh-row-end {
    justify-content: flex-end;
}
.bh-row-space-between {
    justify-content: space-between;
}
.bh-row-space-around {
    justify-content: space-around;
}

/*不换行*/
.bh-row-no-wrap {
    flex-wrap: nowrap;
}
/*排序*/
.bh-col-order-1 {
    order: 1;
}
.bh-col-order-2 {
    order: 2;
}
.bh-col-order-3 {
    order: 3;
}
.bh-col-order-4 {
    order: 4;
}
.bh-col-order-5 {
    order: 5;
}
.bh-col-order-6 {
    order: 6;
}
.bh-col-order-7 {
    order: 7;
}
.bh-col-order-8 {
    order: 8;
}
.bh-col-order-9 {
    order: 9;
}
.bh-col-order-10 {
    order: 10;
}
.bh-col-order-11 {
    order: 11;
}
.bh-col-order-12 {
    order: 12;
}

/*偏移*/
.bh-col-offset-8 {
    margin-left: 33.33333333%;
}
.bh-col-offset-6 {
    margin-left: 25%;
}